import * as React from "react"
import { PageProps, graphql } from "gatsby"
import type { Blogs } from '../types/blog'
import Layout from "../components/Layout"
import FixedContent from "../components/FixedContent"
import PageSection from "../components/PageSection"
import BlogList from "../components/BlogList"
import Seo from "../components/Seo"

type DataProps = {
  allMarkdownRemark: Blogs
}

const IndexPage: React.FC<PageProps<DataProps>> = ({ data }) => (
  <Layout>
    <Seo title="Home" />
    <FixedContent>
      <div className="breadcrumb"></div>
      <PageSection>
        <BlogList list={data.allMarkdownRemark.edges}/>
      </PageSection>
    </FixedContent>
  </Layout>
)

export default IndexPage

export const query = graphql`
  query {
    allMarkdownRemark(
      filter: {fields: {slug: {regex: "/html/"}}},
      sort: { order: DESC, fields: [frontmatter___date] }
    ) {
      totalCount
      edges {
        node {
          id
          fields {
            slug
          }
          frontmatter {
            date(formatString: "YYYY-MM-DD", locale: "zh-CN")
            description
            title
          }
        }
      }
    }
  }
  `